<template>
  <div class="side">
    <div class="side-bar">
      <router-link :to="{name:'homeInfo'}" class="bar1" active-class="active1">主页</router-link>
      <div class="bar1" active-class="active1">
        个人中心
        <div class="allBar2">
          <li>
            <router-link :to="{name:'personInfo'}" class="bar2" active-class="active">个人信息</router-link>
          </li>
          <li>
            <router-link :to="{name:'changePassword'}" class="bar2" active-class="active">修改密码</router-link>
          </li>
        </div>
      </div>
      <div class="bar1" v-show="isShow == '学生'" active-class="active1">
        成绩展示
        <div class="allBar2">
          <li>
            <router-link :to="{name:'gradeShow'}" class="bar2" active-class="active">成绩可视化</router-link>
          </li>
          <li>
            <router-link :to="{name:'queryGrade'}" class="bar2" active-class="active">成绩列表</router-link>
          </li>
        </div>
      </div>
      <div class="bar1" v-show="isShow == '教师'" active-class="active1">
        学生管理
        <div class="allBar2">
          <li>
            <router-link :to="{name:'gradeShowAll'}" class="bar2" active-class="active">成绩可视化</router-link>
          </li>
          <li>
            <router-link :to="{name:'queryGradeAll'}" class="bar2" active-class="active">成绩列表</router-link>
          </li>
          <li>
            <router-link :to="{name:'personInfoAll'}" class="bar2" active-class="active">学生信息</router-link>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "sideBar",
  data() {
    return {
      isShow: sessionStorage.getItem("identity")
    };
  }
};
</script>
<style lang="less" scoped>
.side {
  .side-bar {
    float: left;
    margin-top: 10px;
    height: 880px;
    width: 15%;
    display: flex;
    flex-direction: column;
    background-color: black;
    .bar1 {
      margin-top: 30px;
      font-size: 25px;
      color: white;
      margin: 20px auto;
      text-decoration: none;
      .allBar2 {
        display: none;
        margin: 20px 0;
        .bar2 {
          font-size: 20px;
          color: white;
          text-decoration: none;
          line-height: 50px;
        }
        li {
          //   list-style-type: none;
          .active {
            font-weight: bold;
            color: skyblue;
          }
        }
      }
    }
    .active1 {
      font-weight: bold;
      color: skyblue;
    }
    .bar1:hover {
      font-weight: bold;
      color: skyblue;
    }
    .bar1:hover .allBar2 {
      display: block;
    }
  }
}
</style>